<template>
  <div class="assign-topic">
    <Topic
      :class="{ 'jyfs-question': isRelation }"
      :topic-data="props.topicData"
      v-model:showTopicParser="showTopicParser"
      :subPrefixList="subPrefixList"
    >
      <template #topic-head>
        <div class="topic-head" v-if="props.showHead">
          <div class="label-arr">
            {{ index }}、 {{ questionTypeMap[props.topicData.type] }}
            <div class="label jyfs-label" v-if="isRelation">举一反三</div>
            <div class="divide"></div>
            <div class="label">
              {{ questionTypeMap[props.topicData.type] }}
              {{
                props.topicData.detail_type_name
                  ? ' - ' + props.topicData.detail_type_name
                  : ''
              }}
            </div>
            <div class="divide"></div>
            <div class="label">
              {{ difficultyMap[props.topicData.difficulty] }}
            </div>
            <div class="divide"></div>
            <div class="label">ID：{{ props.topicData.id }}</div>
            <div class="score" v-if="props.showMore && props.showScore">
              分值：{{ props.score ? props.score : '-' }}
            </div>
          </div>
        </div>
      </template>
      <template #topic-foot>
        <div class="topic-foot">
          <div class="knowledge" v-if="props.topicData?.keypoint?.length">
            知识点：<span
              class="knowledge-name"
              v-for="(kp, index) in props.topicData.keypoint"
              :key="index"
              >{{ kp.name }}</span
            >
          </div>
          <slot name="student-box"></slot>
          <div class="more" v-if="props.showMore">
            <slot name="more-action"></slot>
            <template v-if="props.isBasket">
              <div
                class="basket-btn"
                @click.stop="onAddBasket"
                v-if="!taskStore.isExistBasket(props.topicData.id)"
              >
                添加选题篮
              </div>
              <div
                class="basket-btn remove-btn"
                @click.stop="onRemoveBasket"
                v-else
              >
                移出选题篮
              </div>
            </template>
            <div class="action-btn" @click.stop="handleCheckParse">
              <label class="icon"></label>
              <span>{{ showTopicParser ? '收起' : '查看' }}解析</span>
            </div>
            <div class="action-btn" v-if="isSimilar" @click="onShowSimilar">
              <label class="icon icon-1"></label>
              <span>相似题</span>
            </div>
            <div
              class="action-btn"
              v-if="isOneTwoThree"
              @click="onShowOneTwoThree"
            >
              <label class="icon icon-2"></label>
              <span>举一反三</span>
            </div>
          </div>
        </div>
      </template>
    </Topic>
    <slot name="similar"></slot>
  </div>
  <!-- 相似题 -->
  <el-drawer
    v-if="isShowSimilar"
    v-model="isShowSimilar"
    size="50%"
    title="相似题"
    class="similar-drawer"
  >
    <div class="question-list-container flex-column">
      <el-empty
        v-if="!similarQuestionList.length"
        v-loading="loading"
      ></el-empty>
      <AssignTopic
        v-for="(similarQuestion, index) in similarQuestionList"
        :key="index"
        :topic-data="similarQuestion"
        :is-similar="false"
        :index="index + 1"
      />
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useTaskStore } from '@/stores'
import { questionTypeMap } from '@/constants'
import { difficultyMap } from '@/views/target-boost/target-knowledge-point/data'
import Topic from '@/components/rb-topic/Topic.vue'
import { getXkwSimilarQuestions } from '@/apis/target-boost/index'
import AssignTopic from './AssignTopic.vue'

const props = defineProps({
  topicData: { type: Object, required: true },
  index: { required: true },
  showHead: {
    type: Boolean,
    default: true
  },
  isRelation: {
    type: Boolean,
    default: false
  },
  isSimilar: {
    // 是否显示相似题
    type: Boolean,
    default: true
  },
  isOneTwoThree: {
    // 是否需要显示举一反三
    type: Boolean,
    default: false
  },
  isBasket: {
    // 是否需要展示选题篮
    type: Boolean,
    default: true
  },
  isShowParser: {
    // 是否需要展开解析
    type: Boolean,
    default: false
  },
  showMore: {
    // 是否显示相似题，选题篮等
    type: Boolean,
    default: true
  },
  score: {
    // 显示的分值
    type: Number,
    default: 0
  },
  showScore: {
    // 是否显示分值
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['onShowOneTwoThree'])
const taskStore = useTaskStore()
const showTopicParser = ref(props.isShowParser)
const onRemoveBasket = () => {
  taskStore.deleteTopicById([props.topicData.id])
}
const onAddBasket = () => {
  taskStore.setTaskList({
    topic_id: props.topicData.id,
    source: props.topicData.source,
    topic_type: props.topicData.type,
    subject_id: props.topicData.subject,
    is_similar: 0,
    relation_id: 0,
    question_detail: props.topicData
  })
}

function handleCheckParse() {
  showTopicParser.value = !showTopicParser.value
}

const similarQuestionList = ref([])
const isShowSimilar = ref(false)
const onShowSimilar = () => {
  getXkwSimilarQuestionsInfo()
}

const subPrefixList = computed(() => {
  let indexList = []
  if (props.index.toString().includes('-')) {
    indexList.push(`(${props.index.split('-')[1]})`)
  } else if (props.topicData.subproblem) {
    indexList = props.topicData.subproblem.map((_, index) => `(${index + 1})`)
  }
  return indexList
})

const loading = ref(false)
const getXkwSimilarQuestionsInfo = async () => {
  similarQuestionList.value = []
  isShowSimilar.value = true
  loading.value = true
  const res = await getXkwSimilarQuestions(props.topicData.id, {
    kpoint_ids: (props.topicData.keypoint || []).map(item => item.id),
    content: props.topicData.content
  })
  loading.value = false
  if (!res.data) {
    ElMessage.info('该题无相似题')
    return
  }
  similarQuestionList.value = res.data.questions || []
}

const onShowOneTwoThree = () => {
  emit('onShowOneTwoThree')
}
</script>

<style lang="less" scoped>
.assign-topic {
  // 题目框
  --topic-x-padding: 20px;
  --topic-y-padding: 12px;
  --render-radius: 8px;
  :deep(.topic-cpn) {
    padding: var(--topic-y-padding) 0;
    border: 1px solid #c4c4c4;
    border-radius: var(--render-radius);
    margin-bottom: 14px;
    overflow: hidden;

    .rb-question {
      padding: 0 var(--topic-x-padding);
      margin: 0 auto;
    }

    :deep(.expand-analysis-item) {
      width: 94%;
      margin: 0 auto;
    }

    &.jyfs-question {
      border-color: #d89b25;
    }
  }

  .topic-head {
    display: flex;
    align-items: center;
    margin-bottom: var(--topic-y-padding);
    border-bottom: 1px solid rgba(196, 196, 196, 0.3);
    color: #999;
    font-size: 16px;
    padding-bottom: var(--topic-y-padding);
    padding-left: var(--topic-x-padding);

    .label-arr {
      display: flex;
      align-items: center;
      width: 100%;
      .label {
        font-size: 16px;
        color: #040b1a;
        opacity: 0.5;

        &.jyfs-label {
          margin-left: 16px;
          background-color: #fff6e1;
          padding: 5px 14px;
          border: 1px solid #d89b25;
          color: #d89b25;
          font-weight: 700;
          opacity: 1;
          border-radius: 5px;
        }
      }

      .divide {
        height: 16px;
        margin: 0 16px;
        width: 1px;
        background-color: #040b1a;
        opacity: 0.5;
      }
      .score {
        margin-left: auto;
        margin-right: 30px;
      }
    }
  }

  .topic-foot {
    .knowledge {
      padding: var(--topic-y-padding) var(--topic-x-padding);
      color: #040b1a;
      font-size: 16px;

      .knowledge-name {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        height: 27px;
        padding: 0 6px;
        border: 1px solid #e1e1e1;
        border-radius: 3px;
        background-color: #fbfbfb;
        color: #616161;
        font-size: 14px;
        line-height: 27px;
        cursor: pointer;
        margin-right: 8px;
      }
    }

    .more {
      border-top: 1px solid rgba(196, 196, 196, 0.3);
      display: flex;
      position: relative;
      flex-direction: row-reverse;
      align-items: center;
      padding: var(--topic-y-padding) var(--topic-x-padding) 0
        var(--topic-x-padding);
      gap: 30px;

      .action-btn {
        cursor: pointer;
        color: gray;
        font-size: 14px;
        line-height: 14px;
        display: inline-flex;
        align-items: center;

        .icon {
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 14px;
          margin-right: 4px;
          background: url(@/assets/images/assignment/analysis-icon.png)
            no-repeat center/cover;
        }
        .icon-1 {
          background: url(@/assets/images/assignment/analysis-icon-1.png)
            no-repeat center/cover;
        }
        .icon-2 {
          background: url(@/assets/images/assignment/analysis-icon-2.png)
            no-repeat center/cover;
        }
        .icon-3 {
          background: url(@/assets/images/assignment/analysis-icon-2.png)
            no-repeat center/cover;
        }
      }

      .basket-btn {
        padding: 2px 16px;
        font-size: 14px;
        cursor: pointer;
        background: #bfd9ff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #bfd9ff;
        color: #448efb;

        &:hover {
          opacity: 0.95;
        }
      }
      .remove-btn {
        background-color: unset;
        border-color: #448efb;
      }
    }
  }
}
</style>

<!-- eslint-disable -->
<style lang="less">
.similar-drawer {
  .el-drawer__header {
    font-weight: bold;
  }
}
</style>
